<template>
  <div class="setting">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first" class="tabone">
          <el-button
            type="primary"
            size="mini"
            class="addbtn"
            @click="addRole"
          >+ 新增角色</el-button>
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="150" />
            <el-table-column prop="name" label="角色名" width="180" />
            <el-table-column prop="description" label="描述" width="680" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="openRole(scope.row.id)"
                >分配权限</el-button>
                <el-button
                  type="text"
                  @click="openEdit(scope.row)"
                >修改</el-button>
                <el-button
                  type="text"
                  @click="delRole(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="page.currentPage"
            :page-sizes="page.pagesizes"
            :page-size="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="企业名称">
              <el-input v-model="form.name" readonly />
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="form.companyAddress" readonly />
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input v-model="form.companyPhone" readonly />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.mailbox" readonly />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.remarks" readonly />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog
      :title="dialogTitle"
      :visible="showDialog"
      :before-close="cancel"
    >
      <el-form :model="formData" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="formData.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <roles ref="roles" :show-roles.sync="showRoles" />
  </div>
</template>

<script>
import { getRoleList, updateRole, addRole, delRole } from '../../api/setting'
export default {
  components: {
    roles: () => import('./componments/roles.vue')
  },
  data() {
    return {
      showDialog: false,
      showRoles: false,
      dialogTitle: '',
      formData: {
        name: '',
        description: ''
      },
      form: {},
      activeName: 'first',
      tableData: [],
      page: {
        // 当前页
        currentPage: 1,
        // 页容量集合
        pagesizes: [1, 5, 10, 20, 30],
        // 页容量
        pagesize: 5,
        // 数据总条数据
        total: 30
      }
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    openRole(id) {
      this.showRoles = true
      this.$refs.roles.getRoleById(id)
    },
    async delRole(item) {
      try {
        await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delRole(item.id)
        this.$message('删除成功')

        const result = this.page.total % this.page.pagesize

        if (result === 1) {
          this.page.currentPage--
        }
        this.getRoleList()
      } catch {
        this.$message({
          type: 'error',
          message: '删除失败'
        })
      }
      // console.log(res)
    },
    addRole() {
      this.showDialog = true
      this.dialogTitle = '新增角色'
    },
    openEdit(obj) {
      this.dialogTitle = '编辑角色'
      this.showDialog = true
      this.formData.name = obj.name
      this.formData.description = obj.description
      this.formData.id = obj.id
    },
    async submit() {
      if (this.formData.id) {
        await updateRole(this.formData)
        // console.log(res)
      } else {
        await addRole(this.formData)
      }

      this.getRoleList()
      this.$message({
        type: 'success',
        message: '操作成功'
      })
      this.showDialog = false
      this.formData = {
        name: '',
        description: ''
      }
    },
    cancel() {
      this.showDialog = false
      this.formData = {
        name: '',
        description: ''
      }
    },
    handleSizeChange(size) {
      this.page.pagesize = size
      this.getRoleList()
    },
    handleCurrentChange(page) {
      this.page.currentPage = page
      this.getRoleList()
    },
    async getRoleList() {
      const res = await getRoleList({
        page: this.page.currentPage,
        pagesize: this.page.pagesize
      })
      // console.log(res)
      this.tableData = res.rows
      this.page.total = res.total
    }
  }
}
</script>

<style lang="scss" seopend>
.setting {
  background-color: #f0f2f5;
  padding: 20px;
  .tabone {
    padding: 30px 20px;
    .addbtn {
      margin-bottom: 20px;
    }
    .el-table_1_column_4 {
      text-align: right;
    }
    .el-pagination {
      text-align: center;
      margin-top: 30px;
    }
  }
}
</style>
